<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 网页三要素 -->
		<meta name="keywords" content="艾编程,艾编程商城" />
		<meta name="description" content="描述信息" />
		<title>艾编程PC项目实战</title>
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="./css/base.css" />
		<link rel="stylesheet" href="./fonts/iconfont.css" />
		<!-- swiper css -->
		<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
		<link rel="stylesheet/less" href="./css/index.less" />

		<script src="./js/lessc.js"></script>
	</head>
	<body>
		<!--
      网站头部
      site：网站
			submenu：子菜单，下拉菜单
			nav（navigate）：导航
     -->
		<!-- header start -->
		<header class="header">
			<!-- site-topbar start -->
			<div class="site-topbar">
				<div class="container">
					<div class="topbar-nav">
						<ul>
							<li><a href="#">手机商城</a></li>
							<li><a href="#">MINI</a></li>
							<li><a href="#">IoT</a></li>
							<li class="submenu active">
								<a href="#">云服务</a>
								<div class="submenu-list">
									<ul>
										<li>
											<a href="#">
												<img src="./images/server1.png" alt="" />
												通讯录
											</a>
										</li>
										<li>
											<a href="#">
												<img src="./images/server2.png" alt="" />
												短信
											</a>
										</li>
										<li>
											<a href="#">
												<img src="./images/server3.png" alt="" />
												云相册
											</a>
										</li>
										<li>
											<a href="#">
												<img src="./images/server4.png" alt="" />
												手机云盘
											</a>
										</li>
										<li>
											<a href="#">
												<img src="./images/server5.png" alt="" />
												笔记（便签）
											</a>
										</li>
									</ul>
								</div>
							</li>
							<li><a href="#">手机数科</a></li>
							<li><a href="#">升品</a></li>
							<li class="submenu"><a href="#">智能开发平台</a></li>
							<li><a href="#">企业团购</a></li>
							<li><a href="#">资质证照</a></li>
							<li><a href="#">协议规则</a></li>
							<li class="submenu active">
								<a href="#">下载app</a>
								<div class="appcode">
									<img src="./images/二维码.jpg" alt="" />
									手机商城APP
								</div>
							</li>
							<li><a href="#">智能生活</a></li>
							<li><a href="#">Melect Nocation</a></li>
						</ul>
					</div>
					<div class="topbar-info">
						<a href="#">登录</a>
						<a href="#">注册</a>
						<a href="#">消息通知</a>
					</div>
					<div class="topbar-cart">
						<a href="#" class="cart-mini">
							<em class="iconfont icon-gouwuche1"></em>
							购物车
							<span>(0)</span>
						</a>
						<div class="cart-menu">购物车中还没有商品，赶紧选购吧！</div>
					</div>
				</div>
			</div>
			<!-- site-topbar end -->

			<!-- site-header start -->
			<div class="site-header">
				<div class="container">
					<div class="header-logo">
						<a href="#">
							<img src="./images/logo.png" alt="" />
						</a>
					</div>
					<div class="header-nav">
						<ul class="nav-list">
							<li><a href="#">Minini手机</a></li>
							<li><a href="#">Pidmi手机</a></li>
							<li><a href="#">电视</a></li>
							<li><a href="#">笔记本</a></li>
							<li><a href="#">平板</a></li>
							<li><a href="#">家电</a></li>
							<li><a href="#">路由器</a></li>
							<li><a href="#">服务中心</a></li>
							<li><a href="#">社区</a></li>
						</ul>
					</div>
					<div class="header-search">
						<input type="text" class="search-text" placeholder="红米" />
						<a href="#" class="search-btn iconfont icon-fangdajing"></a>
					</div>
				</div>
			</div>
			<!-- site-header end -->
		</header>
		<!-- header end -->

		<!-- main start -->
		<main class="page">
			<!--
				focus：焦点
				slider：滑块
				section：区域、区块
				recommend：推荐
			 -->
			<!-- focus-slider start -->
			<section class="focus-slider container">
				<!--
					slider：滑块
					category：分类、类别
				 -->
				<div class="category">
					<ul>
						<li>
							<a href="#">手机<em class="iconfont icon-jiantouyou"></em></a>
							<div class="category-list">
								<ul>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
									<li>
										<img src="./images/phone.png" alt="" />
										<span>Miaomi 12S</span>
									</li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#">电视<em class="iconfont icon-jiantouyou"></em></a>
							<div class="category-list">222</div>
						</li>
						<li>
							<a href="#">笔记本 平板<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">出行 穿戴<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">耳机 音箱<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">家电<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">智能 路由器<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">电源 配件<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">健康 儿童<em class="iconfont icon-jiantouyou"></em></a>
						</li>
						<li>
							<a href="#">生活 箱包<em class="iconfont icon-jiantouyou"></em></a>
						</li>
					</ul>
				</div>

				<!-- Swiper -->
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="./images/banner-1.png" />
						</div>
						<div class="swiper-slide">
							<img src="./images/banner-2.png" />
						</div>
						<div class="swiper-slide">
							<img src="./images/banner-3.png" />
						</div>
					</div>
					<div class="swiper-button-next swiper-button"></div>
					<div class="swiper-button-prev swiper-button"></div>
					<div class="swiper-pagination"></div>
				</div>
			</section>
			<!-- focus-slider end -->

			<!-- recommend start -->
			<section class="recommend">
				<div class="index-banner container">
					<a href="#">
						<img src="./images/recommend_banner.png" alt="" />
					</a>
				</div>

				<div class="music-recommend container">
					<h2 class="m-title">歌 单 推 荐</h2>

					<div class="m-tab">
						<a href="#" class="active">为你推荐</a>
						<a href="#">官方歌单</a>
						<a href="#">情歌</a>
						<a href="#">网络歌曲</a>
						<a href="#">经典KTV</a>
						<a href="#">热歌</a>
					</div>

					<div class="m-list">
						<ul class="m-item active">
							<li>
								<a href="#">
									<img src="./images/music-1.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">拒绝不开心丨rap情歌甜到你发晕</a>
								</div>
								<span class="m-item-other">播放量：1253.9万</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-2.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">百听不厌！300首古风党必听良曲</a>
								</div>
								<span class="m-item-other">播放量：1.1亿</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-3.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">鬼畜打败恐惧｜整点阳间的东西</a>
								</div>
								<span class="m-item-other">播放量：146.1万</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-4.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">李信｜这里是为我所统帅的战场！</a>
								</div>
								<span class="m-item-other">播放量：1821.6万</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-5.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">千禧盛世 • 重启旧时光</a>
								</div>
								<span class="m-item-other">播放量：2.1亿</span>
							</li>
						</ul>
						<ul class="m-item">
							<li>
								<a href="#">
									<img src="./images/music-1.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">拒绝不开心丨rap情歌甜到你发晕2</a>
								</div>
								<span class="m-item-other">播放量：1253.9万</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-2.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">百听不厌！300首古风党必听良曲2</a>
								</div>
								<span class="m-item-other">播放量：1.1亿</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-3.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">鬼畜打败恐惧｜整点阳间的东西2</a>
								</div>
								<span class="m-item-other">播放量：146.1万</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-4.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">李信｜这里是为我所统帅的战场！2</a>
								</div>
								<span class="m-item-other">播放量：1821.6万</span>
							</li>
							<li>
								<a href="#">
									<img src="./images/music-5.png" alt="" />
								</a>
								<div class="m-item-title">
									<a href="#">千禧盛世 • 重启旧时光2</a>
								</div>
								<span class="m-item-other">播放量：2.1亿</span>
							</li>
						</ul>
					</div>
				</div>
			</section>
			<!-- recommend end -->
		</main>
		<!-- main end -->

		<!-- swiper js -->
		<script src="./js/swiper-bundle.min.js"></script>
		<script>
			// 配置swiper
			let swiper = new Swiper('.mySwiper', {
				effect: 'slide',
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				loop: true,
				autoplay: {
					delay: 2000,
					disableOnInteraction: false,
					pauseOnMouseEnter: true
				}
			});

			// 歌单推荐tab切换
			let mTab = document.querySelectorAll('.m-tab a');
			let mItems = document.querySelectorAll('.m-list .m-item');
			mTab.forEach((item, index) => {
				item.addEventListener('click', e => {
					// 阻止a元素默认行为
					e.preventDefault();
					// 却换tab，先移除active类名，再给当前点击的元素添加active类名
					let mTabActive = document.querySelector('.m-tab a.active');
					// 如果当前点击的元素已经是active，就不必执行下面的代码
					if (mTabActive === item) return;
					mTabActive.classList.remove('active');
					item.classList.add('active');
					document.querySelector('.m-item.active').classList.remove('active');
					mItems[index].classList.add('active');
				});
			});
		</script>
	</body>
</html>
